<template>
	<view class="container">
		<image src="/static/bg.png" class="bg" mode=""></image>
		<view class="userAvar">
			<!-- <image src="" mode=""></image> -->
			<view class="topHeacd"></view>
			<view class="biaoti f f-a-c p-l-40">
				<view v-for="(item,index) in list" :key="index" :class="{active:index==ind}" class="advance m-r-40"
					@click="actInd(item,index)">
					{{item.name}}
				</view>
			</view>
		</view>
		<!-- 下面的 -->
		<view class="body ">
			<view class="waibOxs p-r">
				<!-- <image src="/static/home/sceh.png" class="scehs" mode=""></image>
					<input type="text" v-model="value" @confirm="givMi" placeholder="请输入书籍名称进行搜索" class="inps" name=""
						id=""> -->
				<view @click.stop="showS" class="nameLeft f f-a-c">
					{{time}}
					<image src="/static/xiajian.png" class="xiajian" mode=""></image>
				</view>

			</view>
			<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
				<view class="falef p-20 b-r-15 b-f">
					<view class="top m-b-20">
						书籍列表
					</view>
					<view v-for="(item,index) in listShoop" :key="index" class="falItem">
						<view class="books f f-a-c">
							<image :src="item.book.cover" class="leftImg m-r-25" mode=""></image>
							<view class="rigTit">
								<view class="rigTop f f-a-c">
									{{item.book.name}}
									<text class="childrens m-l-10 b-r-10">{{item.book.category.name||'--'}}</text>
								</view>
								<view class="zuozhe m-t-10">
									{{item.book.author}}著 {{item.book.press}}
								</view>
								<view class="age m-t-10">
									适读年龄：{{item.book.age_limit.name}}
								</view>
								<view class="shaoer f f-a-c m-t-10">
									<view v-for="(ite,ind) in item.book.tags" class="qimeng">
										{{ite.name}}
									</view>
									<!-- 	<view class="qimeng">
										启蒙教育
									</view>
									<view class="qimeng">
										家长热选
									</view> -->
								</view>
							</view>
						</view>
						<view class="storeAickname f f-a-c m-t-30">
							<view class="le m-r-40">
								归还日期
							</view>
							<view class="ri m-l-20">
								{{item.returned_at||'--'}}
							</view>
						</view>
						<view class="storeAickname f f-a-c m-t-30">
							<view class="le m-r-40">
								用户昵称
							</view>
							<view class="ri m-l-20">
								{{item.user.nickname}}
							</view>
						</view>
						<view class="storeAickname f f-a-c m-t-30">
							<view class="le m-r-10">
								用户手机号
							</view>
							<view class="ri m-l-20">
								{{item.user.username}}
							</view>
						</view>
						<view class="storeAickname f f-a-c m-t-30">
							<view class="le m-r-40">
								书籍编码
							</view>
							<view class="ri m-l-20">
								{{item.stock.book_no}}
							</view>
						</view>
						<!-- 	<view v-if="ind==2&&ind!=3" class="guihuan">
							归还
						</view>
						<view v-if="ind!=3" class="botBtn f f-a-c m-t-30">
							<view v-if="ind!=2" class="ret m-r-30">
								归还
							</view>
							<view v-if="ind==1" class="renew">
								续借
							</view>
							<view v-if="ind==0" class="renew">
								借阅
							</view>
						</view> -->
						<view v-if="index!=listShoop.length-1" class="xian">

						</view>
					</view>
					<view v-show="listShoop.length==0" class="zanwu">
						暂无记录
					</view>
				</view>
			</scroll-view>
		</view>
		<u-picker @confirm="confirmFn" v-model="showTime" mode="time"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showTime: false,
				time: '2023-8',
				value: '',
				ind: 0,
				page: 1,
				listShoop: [],
				total: '',
				list: [{
					name: '借阅中'
				}, {
					name: '待归还'
				}]
			}
		},
		watch: {
			ind(newVal, oldVal) {
				this.page = 1
				this.listShoop = []
				this.initList()
			},
			time(newVal, oldVal) {
				this.page = 1
				this.listShoop = []
				this.initList()
			}
		},
		onShow() {
			let date = new Date()
			const year = date.getFullYear();
			const month = date.getMonth() + 1;
			this.time = year + '-' + month
		},
		onLoad() {
			// console.log(newTime, '8888888888');
			this.initList()
		},
		onReachBottom() {
			if (this.listShoop.length == this.total) {
				return
			}
			this.page++
			this.listShoop()
			console.log('111111111');
		},
		methods: {
			showS() {
				this.showTime = true
			},
			async initList() {
				let n = await this.$api.borrowsList({
					page: this.page,
					date: this.time,
					status: this.ind == 0 ? 2 : 3
				})
				this.total = n.data.total
				this.listShoop = [...this.listShoop, ...n.data.data]
			},
			// 选择时间
			confirmFn(e) {
				console.log(e, '1111');
				this.time = e.year + '-' + e.month
			},
			onreachBottom() {
				console.log('123456');
			},
			// 点击切换
			actInd(item, index) {
				this.ind = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.guihuan {
		width: 100%;
		height: 72rpx;
		line-height: 70rpx;
		border: 2rpx solid #009d85;
		border-radius: 38rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: center;
		color: #009d85;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	.zanwu {
		margin-top: 30%;
		color: #009d85;
		text-align: center;
		margin-bottom: 30%;
		font-weight: 600;
		font-size: 36rpx;
	}

	.falItem {
		.renew {
			width: 296rpx;
			height: 72rpx;
			line-height: 70rpx;
			background: #009d85;
			border-radius: 36rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
		}

		.ret {
			width: 296rpx;
			height: 72rpx;
			line-height: 70rpx;
			border: 2rpx solid #009d85;
			border-radius: 38rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: center;
			color: #009d85;
		}

		.le {
			font-size: 26rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			color: #666666;
		}

		.ri {
			font-size: 26rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			color: #333333;
		}

		.qimeng {
			padding: 5rpx 15rpx;
			background-color: #fff9e8;
			color: #F1A870;
			font-size: 24rpx;
			margin-right: 15rpx;
			border-radius: 10rpx;
		}

		.rigTit {
			width: 70%;

			.age {
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #999999;
			}

			.zuozhe {
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #999999;
			}

			.rigTop {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: left;
				color: #1a1a1a;

				.childrens {
					padding: 5rpx 15rpx;
					background-color: #edf8f6;
					color: #009d85;
					font-size: 24rpx;

				}
			}
		}

		.leftImg {
			width: 154rpx;
			height: 196rpx;
			border-radius: 24rpx;
		}

	}

	.top {
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: left;
		color: #333333;
	}

	.xiajian {
		width: 22rpx;
		height: 10rpx;
	}

	.books {}

	.falef {
		width: 90%;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.waibOxs {
		position: relative;
		z-index: 999999999999999999999999999999999999;
		width: 90%;
		height: 50rpx;
		margin: 0 auto;
		margin-top: 30rpx;

		.inps {
			width: 100%;
			height: 72rpx;
			background: #ffffff;
			border-radius: 36rpx;
			margin: 0 auto;
			padding-left: 60rpx;
			box-sizing: border-box;
		}

		.scehs {
			position: absolute;
			width: 24rpx;
			height: 26rpx;
			left: 20rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.advance {
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #999999;
	}

	.itemList {
		padding: 20rpx;
	}

	.topTabs {
		height: 100rpx;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 999;
		position: absolute;
		overflow-x: auto;

		.age {
			width: 112rpx;
			height: 52rpx;
			padding: 5rpx 10rpx;
			background: #f8f8f8;
			border-radius: 26rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: center;
			color: #999999;
			flex-basis: 112rpx;
			flex-shrink: 0;
		}


	}

	.xian {
		width: 100%;
		height: 2rpx;
		background: #e6e6e6;
		margin: 50rpx 0;
	}

	.booksImg {
		width: 160rpx;
		height: 210rpx;
	}

	.lef {
		width: 118rpx;
		height: 40rpx;
		line-height: 40rpx;
		background: #fff9e8;
		border-radius: 8rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: center;
		color: #ecbf2f;
	}

	.age {
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: left;
		color: #999999;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}

	.itemImg {
		width: 100%;
		height: 196rpx;
		border-radius: 20rpx;
	}

	.children {
		width: 118rpx;
		height: 40rpx;
		line-height: 40rpx;
		background: #edf8f6;
		border-radius: 8rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: center;
		color: #009d85;
	}

	.oneNights {
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: left;
		color: #1a1a1a;
	}

	.acts {
		background-color: #009d85 !important;
		color: #ffffff !important;
	}

	.topTabs::-webkit-scrollbar {
		display: none
	}

	.leftItem {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 700;
		text-align: center;
		color: #333333;
		margin: 35rpx 0;
	}

	.active {
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Heavy;
		font-weight: 800;
		color: #333333;
	}

	.body {
		height: calc(100vh - 180rpx);
		overflow-y: auto;
		background-color: #f6f6f6;


	}

	.item {
		background-color: pink;
		width: 100%;
		height: 200rpx;
		margin-bottom: 20rpx;
	}

	.waibOx {
		width: 60%;
	}

	.bg {
		position: fixed;
		top: 0%;
		left: 0%;

		width: 100%;
		height: 338rpx;
	}

	.sceh {
		position: absolute;
		width: 24rpx;
		height: 26rpx;
		left: 20rpx;
		top: 50%;
		transform: translateY(-50%);
	}




	.heat {
		height: 200rpx;
		width: 100%;
		background-color: pink;
		margin-bottom: 30rpx;
	}

	.bg {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 338rpx;
	}

	.biaoti {
		height: 90rpx;
		width: 100%;

		// background-color: pink;
		.inp {
			width: 100%;
			height: 72rpx;
			background: #ffffff;
			border-radius: 36rpx;
			padding-left: 50rpx;
		}

	}

	.topHeacd {
		height: 70rpx;
	}

	.userAvar {
		position: fixed;
		top: 0%;
		left: 0;
		height: 180rpx;
		width: 100%;
		// background-color: #fff;
		z-index: 99;
	}

	.toBg {
		height: 250px;
		width: 100%;
		position: fixed;
		top: 0%;
		left: 0;
		z-index: -1;

		.bg {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}
	}

	.tabbar {
		// background-color: pink;
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 1;

		.tits {
			// position: relative;
			display: flex;
			align-items: center;
			justify-content: center;

			.jian {
				position: absolute;
				left: 20px;
				width: 40rpx;
			}

			.tit_name {
				font-size: 32rpx;
			}
		}
	}

	.tit {
		position: absolute;
		width: 100%;
		text-align: center;
		bottom: 17px;
	}

	.container {
		height: 100vh;
		width: 100%;
		padding-top: 180rpx;
		overflow-y: auto;
	}

	.nameLeft {
		position: relative;
		z-index: 999;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 600;
		text-align: left;
		color: #1a1a1a;
	}
</style>